<template>
	<div>

		<dv-border-box-13>
			<div class="susheright" style="height: 260px; margin-top: 60px;">
				<div class="title-h1">[学生视力检测]</div>
				<div class="data4-box" style="width:92%;height:180px;top:6%;position: relative;margin: 0px auto;">
			    <dv-charts :option="config" />
			  </div>
			</div>
		</dv-border-box-13>
		<dv-border-box-13>
			<div class="susheright" style="height: 250px; margin-top: 0px;">
				<div class="data4-box" style="width:92%;height:220px;top:0%;position: relative;margin: 0px auto;">
						<dv-charts :option="data6" />
					</div>
			</div>
		</dv-border-box-13>
	</div>
</template>
<script>
export default {
	name: 'Left',
	components: {

	},
	props: {
		rows: {
			default: {}
		}
	},
	data(){
		return {
			data6: {},
			name: '左眼',
			config: {}
		}
	},
	mounted(){
		this.$watch('rows', () => {
			this.configChart()
			this.firstData('左眼', 6)
			setInterval(res=> {
				var name = this.name
				if(this.name == '左眼') {
					name = '右眼'
				}else{
					name = '左眼'
				}
				this.name = name
				this.firstData(name, 6)
			}, 3000)
    })
	},
	methods: {
		configChart() {
			this.config = {
			  title: {
			    text: ''
			  },
			  legend: {
			    data: ['左眼', '右眼'],
			    top: '10px',
			    left: 0,
			    textStyle: {
							  fontFamily: 'Arial',
							  fontSize: 13,
							  fill: '#fff'
							}
			  },
			  series: [
			    {
			      name: '左眼',
			      type: 'pie',
			      data: [
			        { name: '轻度视力不良', value: this.rows.allNum49 },
              { name: '中度视力不良', value: this.rows.allNum46 },
              { name: '高度视力不良', value: this.rows.allNum45 },
              { name: '视力正常', value: this.rows.allNum5 }
			      ],
			      radius: '30%',
			      outsideLabel: {
			        show: false
			      },
			      insideLabel: {
			        show: true
			      }
			    },
			    {
			      name: '右眼',
			      type: 'pie',
			      data: [
			        { name: '轻度视力不良', value: this.rows.allNum49 },
              { name: '中度视力不良', value: this.rows.allNum46 },
              { name: '高度视力不良', value: this.rows.allNum45 },
              { name: '视力正常', value: this.rows.allNum5 }
			      ],
			      radius: ['60%', '80%']
			    }
			  ]
			}
		},
		firstData(name, type) {
			var seriesData = []
			if(name == '左眼') {
				if(type == 6) {
					seriesData = [this.rows.data.left6data50, this.rows.data.left6data49, this.rows.data.left6data46, this.rows.data.left6data45]
				}else{
					seriesData = [this.rows.data.left5data50, this.rows.data.left5data49, this.rows.data.left5data46, this.rows.data.left5data45]
				}
				
			}else{
				if(type == 6) {
					seriesData = [this.rows.data.right6data50, this.rows.data.right6data49, this.rows.data.right6data46, this.rows.data.right6data45]
				}else{
					seriesData = [this.rows.data.right5data50, this.rows.data.right5data49, this.rows.data.right5data46, this.rows.data.right5data45]
				}
				
			}
			var text = '小学部视力不良趋势'
			if(type == 5)text = '初中' 
			var data = {
				title: {
					text: text + '' + this.name,
					style: {
					  fill: '#ffc600',
					  fontSize: 17,
					  fontWeight: 'bold',
					  textAlign: 'center',
					  textBaseline: 'bottom'
					}
				},
        legend: {
          data: [
          	{name: name + '5.0及以上', color: '#9fe6b8'},
          	{name: name + '4.9', color: '#ffdb5c'},
          	{name: name + '4.6到4.8', color: '#ff9f7f'},
          	{name: name + '4.5及以下', color: '#fb7293'}
          ],
          textStyle: {
            fill: '#fff'
          }
        },
        xAxis: {
          data: this.rows.data.dates,
          // name: name,
          nameTextStyle: {
					  fill: '#fff',
					  fontSize: 20
					},
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
        },
        yAxis: {
          data: 'value',
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
          min: 0
        },
        series: [
          {
            data: seriesData[0],
            type: 'line',
            name: name + '5.0及以上',
            lineStyle: {
						  stroke: '#9fe6b8'
						}
          },
          {
            data: seriesData[1],
            type: 'line',
            name: name + '4.9',
            lineStyle: {
						  stroke: '#ffdb5c'
						}
          },
          {
            data: seriesData[2],
            type: 'line',
            name: name + '4.6到4.8',
            lineStyle: {
						  stroke: '#ff9f7f'
						}
          },
          {
            data: seriesData[3],
            type: 'line',
            name: name + '4.5及以下',
            lineStyle: {
						  stroke: '#fb7293'
						}
          }
        ]
      
      }
      if(type == 6) {
      	this.data6 = data
      }else{
      	this.data5 = data
      }
		}
	}
};
</script>
<style lang="less" scope>
.susheright{ height: 300px; width: 90%;margin: 30px auto; padding-top: 10px; }
.susheright .title-h1{ padding-top: 20px; }
</style>